<script setup lang="ts">
import {onBeforeUnmount, onMounted, provide, ref} from 'vue';
import {MdPreview, MdCatalog, type HeadList} from 'md-editor-v3';
import articleApi from '@/api/article.ts'
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';
import LayoutStore from "@/store/modules/setting.ts";
import type {TocItem} from "md-editor-v3/lib/types/MdCatalog/MdCatalog";
import Comment from './comment/index.vue'
import {useRoute} from "vue-router";
import {message} from "ant-design-vue";
const route = useRoute()
const layoutStore = LayoutStore()
const article = ref({})

onMounted(async () => {
  //将编辑状态改为 true
  layoutStore.setLayout1(true)
  const result = await articleApi.getInfo(route.query.id,window.location.href)
  text.value = result.data.content
  article.value = result.data
})

provide("articleId", route.query.id)
onBeforeUnmount(() => {
  //将编辑状态改为 false
  layoutStore.setLayout1(false)
})

const id = 'preview-only';
const text = ref();
const scrollElement = '.detail .right .ant-card'
const e = document.querySelector('.right .content .ant-card-body')


const  copyContent = () => {
  /* 复制内容到文本域 */
  navigator.clipboard.writeText(text.value);
  message.success('复制成功');
}
</script>

<template>
  <div class="detail">
    <div class="left">
      <a-card style="height: 100%;" body-style="height:100%;">
        <a-skeleton active :loading="!text" style="height: 100%;" :paragraph="{ rows: 20 }" >
          <MdCatalog :editorId="id"
                     :scrollElement="scrollElement" />
        </a-skeleton>
      </a-card>
    </div>
    <div class="right">
      <a-card style="height: 100%;width: 100%;overflow: auto" class="content">
        <a-skeleton active :loading="!text" style="min-height: 400px;" :paragraph="{ rows: 20 }" >
          <h1 class="title">
            {{ article.title }}
          </h1>

          <div class="data">
            <div class="time">
              <ClockCircleOutlined />
              {{ article.createTime }}
            </div>
            <div class="watch-num">
              <EyeOutlined />
              {{ article.watchNum }}
            </div>
            <div class="like-num">
              <LikeOutlined />
              {{ article.likeNum }}
            </div>
          </div>

          <!--      内容-->
          <MdPreview :id="id"
                     :modelValue="text" />
          <!--        <a-spin v-show="!text" size="large"></a-spin>-->
          <!--        评论-->
          <Comment class="comment" ></Comment>
        </a-skeleton>
      </a-card>
    </div>

    <a-float-button-group trigger="click" type="primary" :style="{ right: '24px' }">
      <template #icon>
        <MoreOutlined />
      </template>
      <a-float-button tooltip="复制" @click="copyContent">
        <template #icon>
          <CopyOutlined />
        </template>
      </a-float-button>
    </a-float-button-group>
  </div>
</template>
<style scoped lang="scss">
.detail{
  height: 100%;
  width: 100%;
  display: flex;
  gap: 30px;
  .title{
    font-size: 25px;
    font-weight: 600;
  }
  .data{
    display: flex;
    gap: 15px;
    >div{
      display: flex;
      align-items: center;
      gap: 3px;
      color: rgb(119, 126, 139);
    }
  }
  .left{
    overflow: auto;
    height: 100%;
    &::-webkit-scrollbar{
      display: none;
    }
    flex: .4;
  }
  .right{
    min-height: 400px;
    flex: 2;
    .comment{
      margin-top: 30px;
    }
  }
}
</style>
